<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <title>领用申请</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/ssmzy05/static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/ssmzy05/static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/ssmzy05/static/css/index.css">
    <style>
        #selectForm{
            margin-left: 55px;
        }
        .cell{
            text-align: center;
        }
    </style>
</head>
    <body>
        <div id="app">
            <!--    搜索-->
            <el-form id="selectForm" :inline="true" :model="selectForm" class="demo-form-inline">
                <el-form-item label="部门">
                    <el-input v-model="selectForm.deptName" placeholder="部门"></el-input>
                </el-form-item>
                <el-form-item label="申请人">
                    <el-input v-model="selectForm.username" placeholder="申请人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="showAddForm = true"></el-button>
                </el-form-item>
            </el-form>

            <!--      addForm  添加表单    -->
            <el-dialog title="新增申请" :visible.sync="showAddForm">
                <el-form id="add_apply_form" :inline="true" :model="applyForm" class="demo-form-inline">
                    <el-form-item label="领用部门" :label-width="formLabelWidth">
                        <el-select v-model="applyForm.deptid" placeholder="请选择领用部门">
                            <el-option v-for="(dept,i) in depts" :label="dept.deptName" :value="dept.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请人" :label-width="formLabelWidth">
                        <el-select v-model="applyForm.sqr" placeholder="请选择申请人">
                            <el-option v-for="(consumer,i) in consumers" :label="consumer.username" :value="consumer.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model="applyForm.memo"/>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="showAddForm = false">取 消</el-button>
                        <el-button type="primary" @click="add">确 定</el-button>
                    </div>
                </el-form>
            </el-dialog>

            <!--     数据       -->
            <template>
                <el-table
                        :data="applys"
                        style="width: 100%">
                    <el-table-column
                            prop="ID"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="DEPT_NAME"
                            label="申请部门"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="SQRNAME"
                            label="申请人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                        prop="SQSJ"
                        label="申请时间"
                        width="180">
                        <template slot-scope="scope">
                            {{ new Date(scope.row.SQSJ).toLocaleDateString() }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="MEMO"
                        label="备注"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="STATUS"
                        label="审批状态"
                        width="180">
                        <template slot-scope="scope">
                            <el-tag type="info" v-if="scope.row.STATUS == '未审批' ">未审批</el-tag>
                            <el-tag type="warning" v-if="scope.row.STATUS == '审批中' ">审批中</el-tag>
                            <el-tag type="success" v-if="scope.row.STATUS == '审批通过' ">审批通过</el-tag>
                            <el-tag type="danger" v-if="scope.row.STATUS == '审批未通过' ">审批未通过</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="DJRNAME"
                        label="登记人"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="DJSJ"
                        label="登记时间"
                        width="180">
                        <template slot-scope="scope">
                            {{ new Date(scope.row.DJSJ).toLocaleDateString() }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="DJSTATUS"
                        label="登记状态"
                        width="180"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.DJSTATUS == '已提交' ? true : false"
                                    active-text="已提交"
                                    active-color="#13ce66"
                                    inactive-text="未提交"
                                    inactive-color="#ff4949"
                                    :disabled="scope.row.DJSTATUS == '已提交' ? true : false"
                                    @change="updateDJSTATUS(scope.row.ID)"
                                    v-if="scope.row.DJSTATUS != '通过' && scope.row.DJSTATUS != '未通过' ">
                            </el-switch>
                            <el-tag type="success" v-if="scope.row.status == '通过' ">通过</el-tag>
                            <el-tag type="danger" v-if="scope.row.status == '未通过' ">未通过</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            fixed="right"
                            width="400"
                    >
                        <template slot-scope="scope">
                            <el-button type="success" size="small"
                                       :disabled="scope.row.DJSTATUS == '已提交' ? true : false" @click="toModifyForm(scope.$index,applys)">编辑
                            </el-button>
                            <el-button type="primary" size="small"
                                       :disabled="scope.row.DJSTATUS == '已提交' ? true : false" @click="toAddApplyDetail(scope.row.ID)">添加明细
                            </el-button>
                            <el-button type="primary" size="small"
                                       :disabled="scope.row.DJSTATUS == '已提交' ? true : false" @click="selectApplyDetail(scope.row.ID)">查看明细
                            </el-button>
                            <el-button type="danger" size="small"
                                       :disabled="scope.row.DJSTATUS == '已提交' ? true : false" @click="deleteApply(scope.row.ID)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!--编辑申请-->
            <el-dialog title="编辑申请" :visible.sync="showModifyApplyForm">
                <el-form id="modify_apply_form" :inline="true" :model="applyForm" class="demo-form-inline">
                    <el-form-item label="申请编号" :label-width="formLabelWidth">
                        <el-input v-model="applyForm.id" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="领用部门" :label-width="formLabelWidth">
                        <el-select v-model="applyForm.deptid" placeholder="请选择领用部门">
                            <el-option v-for="(dept,i) in depts" :label="dept.deptName" :value="dept.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请人" :label-width="formLabelWidth">
                        <el-select v-model="applyForm.sqr" placeholder="请选择申请人">
                            <el-option v-for="(consumer,i) in consumers" :label="consumer.username" :value="consumer.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model="applyForm.memo"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showModifyApplyForm = false">取 消</el-button>
                    <el-button type="primary" @click="modify">修 改</el-button>
                </div>
                </el-form>
            </el-dialog>

            <!--添加明细-->
            <el-dialog title="添加明细" :visible.sync="showAddApplyDetailForm">
                <el-form id="add_apply_detail_form" :inline="true" :model="applyDetailForm" class="demo-form-inline">
                    <el-form-item label="申请表编号" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.lysqid" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="物品编号" :label-width="formLabelWidth">
                        <el-select v-model="applyDetailForm.wpid" placeholder="请选择领用物品">
                            <el-option v-for="(good,i) in goods" :label="good.goodsname" :value="good.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请数量" type="number" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.sqnum" autocomplete="off" :disabled="false"></el-input>
                    </el-form-item>
                    <el-form-item label="领用登记数量" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.djnum" autocomplete="off" :disabled="false"></el-input>
                    </el-form-item>
                    <el-form-item label="领用登记金额" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.djje" autocomplete="off" :disabled="false"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showAddApplyDetailForm = false">取 消</el-button>
                    <el-button type="primary" @click="addApplyDetail">新 增</el-button>
                </div>
                </el-form>
            </el-dialog>

            <!--     申请明细       -->
            <el-dialog title="申请明细" :visible.sync="showApplyDetailForm" width="70%">
                <el-table :data="applyDetails">
                    <el-table-column property="LYMXID" label="明细编号" width="80"></el-table-column>
                    <el-table-column property="LYSQID" label="领用申请单编号" width="100"></el-table-column>
                    <el-table-column property="GOODSNAME" label="领用物品" width="100"></el-table-column>
                    <el-table-column property="SQNUM" label="申请数量" width="80"></el-table-column>
                    <el-table-column property="DJNUM" label="登记数量" width="80"></el-table-column>
                    <el-table-column property="DJJE" label="登记金额" width="80"></el-table-column>
                    <el-table-column label="操 作" width="200">
                        <template slot-scope="scope">
                            <el-button type="success" size="small" @click="toModifyDetailForm(scope.$index,applyDetails)">编辑</el-button>

                            <el-button type="danger" size="small" @click="deleteDetail(scope.row.LYMXID,scope.row.LYSQID)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>

            <!--编辑明细-->
            <el-dialog title="添加明细" :visible.sync="showModifyApplyDetailForm">
                <el-form id="add_apply_detail_form" :inline="true" :model="applyDetailForm" class="demo-form-inline">
                    <el-form-item label="申请明细编号" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.lymxid" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="申请表编号" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.lysqid" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="物品编号" :label-width="formLabelWidth">
                        <el-select v-model="applyDetailForm.wpid" placeholder="请选择领用物品">
                            <el-option v-for="(good,i) in goods" :label="good.goodsname" :value="good.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请数量" type="number" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.sqnum" autocomplete="off" :disabled="false"></el-input>
                    </el-form-item>
                    <el-form-item label="领用登记数量" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.djnum" autocomplete="off" :disabled="false"></el-input>
                    </el-form-item>
                    <el-form-item label="领用登记金额" :label-width="formLabelWidth">
                        <el-input v-model="applyDetailForm.djje" autocomplete="off" :disabled="false"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showModifyApplyDetailForm = false">取 消</el-button>
                    <el-button type="primary" @click="modifyApplyDetail">修 改</el-button>
                </div>
                </el-form>
            </el-dialog>

        </div>
    </body>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                showAddForm:false,     //新增申请
                showModifyApplyForm:false,  //编辑申请
                showAddApplyDetailForm:false,  //新增明细
                showApplyDetailForm:false,    //查询明细
                showModifyApplyDetailForm:false, //编辑明细

                depts:[],
                consumers:[],
                goods:[],
                applys:[],
                applyDetails:[],

                applyDetailForm:{
                    lymxid:'',
                    lysqid:'',
                    wpid:'',
                    sqnum:'',
                    djnum:'',
                    djje:''
                },
                applys:[],
                selectForm:{
                    deptName:'',
                    username:''
                },
                applyForm:{
                    id:'',
                    deptId:'',
                    sqr:'',
                    sqsj:'',
                    memo:'',
                    status:'',
                    djr:'',
                    djsj:'',
                    djstatus:''
                },
                formLabelWidth:'120px'
            },
            methods:{
                // 查询
                list(){
                    let _this = this;
                    let url = "http://localhost:8080/ssmzy05/receive/queryList";
                    if (_this.selectForm.deptName != '' && _this.selectForm.username != '')
                        url = url + "/" + vue.selectForm.deptName + "/" + _this.selectForm.username;
                    else if (_this.selectForm.username != '')
                        url = url + "/" + null + "/" + _this.selectForm.username;
                    else if (_this.selectForm.deptName != '')
                        url = url + "/" + _this.selectForm.deptName + "/" + null;
                    else
                        url = url + "/" + null + "/" + null;
                    $.ajax({
                        async:true,
                        url:url,
                        type:'get',
                        dataType:'json',
                        success:function(jsonData){
                            console.log(jsonData);
                            _this.applys = jsonData.data;
                        }
                    });
                },

                //添加
                add(){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/receive/add',
                        type:'post',
                        dataType:'json',
                        contentType:'application/json',
                        data:JSON.stringify(_this.applyForm),
                        success:function(jsonData){
                            _this.showAddForm = false;
                            _this.applys.push(jsonData.data);
                            _this.empty(_this.applyForm);
                        }
                    });
                },
                // 查询用户
                selectConsumer(){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/consumer/queryAll',
                        type:'get',
                        dataType:'json',
                        success:function(jsonData){
                            console.log(jsonData);
                            _this.consumers = jsonData;
                        }
                    });
                },
                // 查询部门
                selectDept(){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/department/querAll',
                        type:'get',
                        dataType:'json',
                        success:function(jsonData){
                            console.log(jsonData);
                            _this.depts = jsonData;
                        }
                    });
                },

                listGoods(){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/goods/queryAll',
                        type:'get',
                        dataType:'json',
                        success:function(jsonData){
                            console.log("物品"+jsonData);
                            _this.goods = jsonData;
                        }
                    });
                },
                //更改登记状态   已提交 | 未提交
                updateDJSTATUS(id){
                    alert(id);
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/receive/modifyDjstatus/'+id,
                        type:'put',
                        dataType:'json',
                        data:JSON.stringify(_this.applyDetailForm),
                        success:function(jsonData){
                            _this.list();
                        }
                    });
                },

                // 点击删除
                deleteApply(id) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let _this = this;
                        $.ajax({
                            async:true,
                            url:'/ssmzy05/receive/removeApply/'+id,
                            type:'delete',
                            success:function(jsonData){
                                if (jsonData.data == false){
                                    _this.$message({
                                        type: 'info',
                                        message: '还有明细数据，不可删除'
                                    });
                                    return;
                                }else {
                                    _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    _this.list();
                                }
                            }
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                //编辑
                toModifyForm(i,data){
                    let v = this;
                    console.log(i)
                    v.applyForm.id = data[i].ID;
                    v.applyForm.sqr = data[i].SQR;
                    v.applyForm.memo = data[i].MEMO;
                    v.showModifyApplyForm = true;
                },

                //编辑申请
                modify(){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/receive/modify',
                        type:'put',
                        dataType:'json',
                        contentType:'application/json',
                        data:JSON.stringify(_this.applyForm),
                        success:function(jsonData){
                            _this.showModifyApplyForm = false;
                            _this.empty(_this.applyForm);
                            _this.list();
                        }
                    });
                },

                //添加明细表单
                toAddApplyDetail(id){
                    this.showAddApplyDetailForm = true;
                    this.applyDetailForm.lysqid = id;
                },

                //添加明细
                addApplyDetail(){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/receiveDetail/add',
                        type:'post',
                        dataType:'json',
                        contentType:'application/json',
                        data:JSON.stringify(_this.applyDetailForm),
                        success:function(jsonData){
                            _this.showAddApplyDetailForm = false;
                            _this.applyDetails = jsonData.data;
                            _this.empty(_this.applyDetailForm);
                        }
                    });
                },

                //查询明细
                selectApplyDetail(id){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/receiveDetail/queryDetail/'+id,
                        type:'get',
                        dataType:'json',
                        success:function(jsonData){
                            console.log(jsonData);
                            _this.applyDetails = jsonData.data;
                            _this.showApplyDetailForm = true;
                        }
                    });
                },

                //编辑明细
                toModifyDetailForm(i,row){
                    let v = this;
                    console.log(i)
                    v.applyDetailForm.lymxid = row[i].LYMXID;
                    v.applyDetailForm.lysqid = row[i].LYSQID;
                    v.applyDetailForm.wpid = row[i].WPID;
                    v.applyDetailForm.sqnum = row[i].SQNUM;
                    v.applyDetailForm.djnum = row[i].DJNUM;
                    v.applyDetailForm.djje = row[i].DJJE;
                    v.showModifyApplyDetailForm = true;
                },

                //modifyApplyDetail 编辑明细
                modifyApplyDetail(){
                    let _this = this;
                    $.ajax({
                        async:true,
                        url:'/ssmzy05/receiveDetail/modify',
                        type:'put',
                        dataType:'json',
                        contentType:'application/json',
                        data:JSON.stringify(_this.applyDetailForm),
                        success:function(jsonData){
                            _this.showModifyApplyDetailForm = false;
                            _this.selectApplyDetail(_this.applyDetailForm.lysqid);
                            _this.empty(_this.applyDetailForm);
                        }
                    });
                },

                //删除明细
                deleteDetail(lymxid,lysqid){
                    alert(lymxid)
                    alert(lysqid)
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let _this = this;
                        $.ajax({
                            async:true,
                            url:'/ssmzy05/receiveDetail/removeDetail/'+lymxid,
                            type:'delete',
                            success:function(jsonData){
                                if (jsonData.data == false){
                                    _this.$message({
                                        type: 'info',
                                        message: '还有明细数据，不可删除'
                                    });
                                    return;
                                }else {
                                    _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    _this.selectApplyDetail(lysqid);
                                }
                            }
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                empty(form){
                    Object.keys(form).forEach(key => (form[key] = ''));
                }
            },

            mounted() {
                this.selectConsumer();
                this.selectDept();
                this.listGoods();
                this.list();
            },
        });
    </script>
</html>